<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>指令</title>
</head>
<body>
<div id="app"></div>

  <script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
  <!---->
  <script type="text/javascript">
    //启动Vue
    new Vue({
      el: '#app',
      <!-- 必须有一个根节点,如:div -->
      <!--v-if,v-else-if,v-else三个指令的使用，必须是相邻的DOM元素-->
      template: `
          <div>
            <span v-text="myText"></span>
            <hr/>
            <span v-html="myHtml"></span>


            <button v-if=" num == 1 ">测试 v-if</button>
            <button v-else-if=" num == 2 ">测试 v-else-if</button>
            <button v-else >测试 v-else</button>

            <hr/>
            <button v-show="isShow">我是v-show</button>

          </div>
      `,
      //动态数据的声明
      data: function () { //也可使用对象
        return {
          //template中要使用的数据
          myText: '<h1>我是myText的值!</h1>' ,
          myHtml: '<h1>我真的是HTML!</h1>' ,
          num: 2 ,
          isShow: true
        }
      }
    });

  </script>
</body>
</html>
